<template>
    <div class="three-box" id="three-box"></div>
  </template>
  
  <script setup>
  import { getCurrentInstance, onMounted } from "vue";
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
  import {
    initStats,
    initRenderer,
    initCamera,
    addHouseAndTree,
    initDefaultLighting,
    initDefaultDirectionalLighting
  } from "../../scripts/util";
  import * as dat from "dat.gui";
  let { proxy } = getCurrentInstance();
  let THREE = proxy.$THREE;
  
  
  onMounted(() => {
    const threeBox = document.getElementById("three-box");
    // use the defaults
    //   var stats = initStats(threeBox);
    var renderer = initRenderer(threeBox, THREE);
    var camera = initCamera(threeBox, THREE);
  
    renderer.shadowMap.enabled = true;
    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();
    initDefaultDirectionalLighting(THREE,scene)
    initDefaultLighting(THREE,scene)
    const control = new OrbitControls(camera, renderer.domElement); //鼠标交互、左键移动场景、滚轮放大缩小、右键平移
  
    
      
    render();
  
    function render() {
      // stats.update();
      requestAnimationFrame(render);
      control.update();
      renderer.render(scene, camera);
    }
  
  });
  </script>
  
  <style>
  .three-box {
    position: fixed;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    width: 100%;
  }
  </style>